<template>
    <div class="codeManageListComponent" v-if="oItem" :style="{
    paddingTop: oItem.main.wrapperPT+'px',
    paddingBottom: oItem.main.wrapperPB+'px',
    paddingLeft: oItem.main.wrapperPLR+'px',
    paddingRight: oItem.main.wrapperPLR+'px',
  }">

        <div class="style1" v-if="oItem.main.style === 1" :style="{
       
        paddingTop: oItem.main.modulePT+'px',
        paddingBottom: oItem.main.modulePB+'px',
        paddingLeft: oItem.main.modulePLR+'px',
        paddingRight: oItem.main.modulePLR+'px',

        backgroundColor: oItem.main.wrapperBgColor||'transparent',
        backgroundImage: oItem.main.wrapperBgImg?('url(\''+oItem.main.wrapperBgImg+'\')'):'none',

        borderTopLeftRadius: oItem.main.wrapperBTR+'px',
        borderTopRightRadius: oItem.main.wrapperBTR+'px',
        borderBottomLeftRadius: oItem.main.wrapperBBR+'px',
        borderBottomRightRadius: oItem.main.wrapperBBR+'px',

        }">

            <div class="item" v-for="l in list" :key="l.id" :style="{
          backgroundColor: oItem.main.moduleBgColor||'transparent',
          backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',

          borderTopLeftRadius: oItem.main.moduleBTR+'px',
          borderTopRightRadius: oItem.main.moduleBTR+'px',
          borderBottomLeftRadius: oItem.main.moduleBBR+'px',
          borderBottomRightRadius: oItem.main.moduleBBR+'px',

          marginBottom: oItem.main.moduleSpace+'px',
        }" :class="oItem.main.moduleSpace>0?'shadow':''">
                <div class="body">
                    <div class="d1">
                        <p :style="{color:oItem.main.titleFontColor||'transparent'}">
                            {{ l.name }}
                            <i :class="oItem.main.editIcon" :style="{ color: oItem.main.tagFontColor||'transparent' }"></i>
                        </p>
                        <span>
                            <i class="bg" :style="{ backgroundColor: oItem.main.tagFontColor||'transparent' }"></i>
                            <i class="n" :style="{ color: oItem.main.tagFontColor||'transparent' }">码名称</i>
                        </span>
                    </div>
                    <div class="d2">
                        <p :style="{color:oItem.main.titleFontColor||'transparent'}">{{ l.cid }}</p>
                        <span>
                            <i class="bg" :style="{ backgroundColor: oItem.main.tagFontColor||'transparent' }"></i>
                            <i class="n" :style="{ color: oItem.main.tagFontColor||'transparent' }">识别号</i>
                        </span>
                    </div>
                    <div class="d3">
                        <p :style="{color:oItem.main.titleFontColor||'transparent'}">{{ l.sid }}</p>
                        <span>
                            <i class="bg" :style="{ backgroundColor: oItem.main.tagFontColor||'transparent' }"></i>
                            <i class="n" :style="{ color: oItem.main.tagFontColor||'transparent' }">系统ID</i>
                        </span>
                    </div>
                    <div class="d4">
                        <button :style="{ 
                backgroundColor: oItem.main.btnBgColor||'transparent',
                color: oItem.main.btnFontColor||'transparent',
                
                 }">
                            <i :class="oItem.main.btnIcon"></i>
                            <span>划拨</span>
                        </button>
                    </div>
                </div>
                <div class="foot" :style="{color:oItem.main.timeFontColor||'transparent'}">{{ l.time }}</div>
            </div>
        </div>

        <div class="style2" v-if="oItem.main.style === 2" :style="{

            paddingTop: oItem.main.wrapperPT+'px',
            paddingBottom: oItem.main.wrapperPB+'px',
            paddingLeft: oItem.main.wrapperPLR+'px',
            paddingRight: oItem.main.wrapperPLR+'px',

            backgroundColor: oItem.main.wrapperBgColor||'transparent',
            backgroundImage: oItem.main.wrapperBgImg?('url(\''+oItem.main.wrapperBgImg+'\')'):'none',

            borderTopLeftRadius: oItem.main.wrapperBTR+'px',
            borderTopRightRadius: oItem.main.wrapperBTR+'px',
            borderBottomLeftRadius: oItem.main.wrapperBBR+'px',
            borderBottomRightRadius: oItem.main.wrapperBBR+'px',
        }">

            <ul :style="{
          paddingTop: oItem.main.modulePT+'px',
          paddingBottom: oItem.main.modulePB+'px',
          paddingLeft: oItem.main.modulePLR+'px',
          paddingRight: oItem.main.modulePLR+'px',

        }">
                <li class="head" :style="{
          backgroundColor: oItem.main.moduleBgColor,
          backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',

          borderTopLeftRadius: oItem.main.moduleBTR+'px',
          borderTopRightRadius: oItem.main.moduleBTR+'px',
          borderBottomLeftRadius: oItem.main.moduleBBR+'px',
          borderBottomRightRadius: oItem.main.moduleBBR+'px',

          marginBottom: oItem.main.moduleSpace+'px',

          color: oItem.main.titleFontColor
        }">
                    <p class="p1">码名称</p>
                    <p class="p2">识别号</p>
                    <p class="p3">系统ID</p>
                    <p class="p4">操作</p>
                </li>
                <li class="item" v-for="l in list" :key="l.id" :style="{
          backgroundColor: oItem.main.moduleBgColor,
          backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none',
          borderTopLeftRadius: oItem.main.moduleBTR+'px',
          borderTopRightRadius: oItem.main.moduleBTR+'px',
          borderBottomLeftRadius: oItem.main.moduleBBR+'px',
          borderBottomRightRadius: oItem.main.moduleBBR+'px',

          marginBottom: oItem.main.moduleSpace+'px',
        }">
                    <p class="p1">
                        <span :style="{color: oItem.main.titleFontColor||'transparent'}">{{ l.name }}</span>
                        <i :class="oItem.main.editIcon" :style="{ color: oItem.main.btnBgColor||'transparent' }"></i>
                    </p>
                    <p class="p2" :style="{
                      color: oItem.main.tagFontColor
                    }">{{ l.cid }}</p>
                    <p class="p3" :style="{
                      color: oItem.main.tagFontColor
                    }">{{ l.sid }}</p>
                    <p class="p4">
                        <button :style="{ 
                          backgroundColor: oItem.main.btnBgColor||'transparent',
                          color: oItem.main.btnFontColor
                          }">
                            <i :class="oItem.main.btnIcon"></i>
                            <span>划拨</span>
                        </button>
                    </p>
                </li>
            </ul>
        </div>

    </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
    name: "codeManageListComponent",
    data() {
        return {
            oItem: null,
            list: [
                {
                    id: 1,
                    name: "徐婷婷",
                    cid: 26,
                    sid: 36,
                    time: "2022-05-15 18:38:30",
                },
                {
                    id: 2,
                    name: "徐婷婷",
                    cid: 26,
                    sid: 36,
                    time: "2022-05-15 18:38:30",
                },
                {
                    id: 3,
                    name: "徐婷婷",
                    cid: 26,
                    sid: 36,
                    time: "2022-05-15 18:38:30",
                },
                {
                    id: 4,
                    name: "徐婷婷",
                    cid: 26,
                    sid: 36,
                    time: "2022-05-15 18:38:30",
                },
                // { id: 5, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
                // { id: 6, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
                // { id: 7, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
                // { id: 8, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
                // { id: 9, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
                // { id: 10, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
                // { id: 11, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
                // { id: 12, name: "徐婷婷", cid: 26, sid: 36, time: "2022-05-15 18:38:30" },
            ],
        };
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
        const emitName = this.ename + this.id;
        Bus.$off(emitName);
        Bus.$on(emitName, (control) => {
            this.oItem = null;
            this.$nextTick(() => {
                this.oItem = JSON.parse(control);
            });
        });
    },
    methods: {
        //页面初始化
        init() {
            // //console.log("进入init");
            this.oItem = null;
            this.oItem = JSON.parse(JSON.stringify(this.item));
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>
<style scoped lang="scss">
.codeManageListComponent {
    display: flex;
    flex: 1;
    box-sizing: border-box;

    .style1 {
        display: flex;
        flex-direction: column;
        flex: 1;
        box-sizing: border-box;

        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;

        .item {
            display: flex;
            flex-direction: column;
            flex: 1;

            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: scroll;

            padding: 15px 15px 10px 15px;
            box-sizing: border-box;

            
            &.shadow{
              box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee,
                -3px -3px 3px #eee;
            }
            &:last-child {
                margin-bottom: 0 !important;
            }
            .body {
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #eee;
                margin-bottom: 15px;
                padding-bottom: 15px;
                .d1 {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    p {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        font-size: 16px;
                        i {
                            font-size: 14px;
                            margin-left: 5px;
                        }
                    }
                    span {
                        font-size: 12px;
                        position: relative;
                        padding: 2px 5px;
                        .bg {
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 2;
                            width: 100%;
                            height: 100%;
                            opacity: 0.15;
                            border-radius: 3px;
                        }
                        .n {
                            font-style: normal;
                        }
                    }
                }
                .d2 {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    p {
                        margin-bottom: 10px;
                        font-size: 14px;
                    }
                    span {
                        font-size: 12px;
                        position: relative;
                        padding: 2px 5px;
                        .bg {
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 2;
                            width: 100%;
                            height: 100%;
                            opacity: 0.15;
                            border-radius: 3px;
                        }
                        .n {
                            font-style: normal;
                        }
                    }
                }
                .d3 {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    p {
                        margin-bottom: 10px;
                        font-size: 14px;
                    }
                    span {
                        font-size: 12px;
                        position: relative;
                        padding: 2px 5px;
                        .bg {
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 2;
                            width: 100%;
                            height: 100%;
                            opacity: 0.15;
                            border-radius: 3px;
                        }
                        .n {
                            font-style: normal;
                        }
                    }
                }
                .d4 {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    button {
                        padding: 6px 10px;
                        border: none;
                        border-radius: 40px;
                        display: flex;
                        align-items: center;
                        i {
                            font-size: 12px;
                            width: 18px;
                            height: 18px;
                            border-radius: 100%;
                            box-sizing: border-box;
                            margin-right: 5px;
                            padding: 2px;
                        }
                        span {
                            font-size: 14px;
                        }
                    }
                }
            }
            .foot {
                height: 30px;
                display: flex;
                align-items: center;
                color: #777;
                font-size: 14px;
            }
        }
    }
    .style2 {
        display: flex;
        flex: 1;
        box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
        ul {
            display: flex;
            box-sizing: border-box;
            flex-direction: column;
          
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: scroll;
            flex: 1;
            li {
                display: flex;
                align-items: center;
                height: 56px;
                background-position: center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: scroll;
                &:last-child{margin-bottom: 0!important;}
                p {
                    width: 25%;
                    display: flex;
                    justify-content: center;
                }
                &.head {
                   font-size:16px;
                    .p1 {
                        width: 25%;
                    }
                    .p2 {
                        width: 25%;
                    }
                    .p3 {
                        width: 25%;
                    }
                    .p4 {
                        width: 25%;
                    }
                }
                &.item {
                    p {
                        color: #777;
                    }
                    .p1 {
                        width: 25%;
                        display: flex;
                        align-items: center;
                        i {
                            font-size: 14px;
                            margin-left: 5px;
                        }
                    }
                    .p2 {
                        width: 25%;
                    }
                    .p3 {
                        width: 25%;
                    }
                    .p4 {
                        width: 25%;
                        button {
                            padding: 5px 10px;
                            border: none;
                            border-radius: 40px;
                            display: flex;
                            align-items: center;
                            i {
                                font-size: 12px;
                                width: 18px;
                                height: 18px;
                                border-radius: 100%;
                              
                                box-sizing: border-box;
                                margin-right: 5px;
                                padding: 2px;
                            }
                            span {
                                font-size: 14px;
                               
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
